<template>
	<div class="checkbox-container" :cities="cities">
		<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<div style="margin: 15px 0;"></div>
		<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
			<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
		</el-checkbox-group>
	</div>

</template>
<style type="text/css">
	.checkbox-container {
		margin-top: 60px;
		margin-left: 400px;
	}
</style>
<script>
	import bus from '../bus.js'
	export default {
		data() {
			return {
				checkAll: true,
				checkedCities: [],
				isIndeterminate: true
			};
		},
		props: {//props是组件暴露出来的可以在被父组件调用的时候被父组件定义的属性，如果props是对象或者数组类型，必须使用工厂函数返回一个实例，同时，props属性在子组件和父组件之间是双向绑定的（在props为对象或者数组的情况下）
			cities: {
				default: function() {//默认值，如果父组件在调用该子组件时不定义props属性，则子组件使用此默认值
					return ['1','2']//默认为数组['1','2']，如果调用该组件处不填写该参数，则为该默认值
				}
			},
		},
		methods: {
			handleCheckAllChange(event) {
				this.checkedCities = event.target.checked ? this.$props.cities : [];
				this.isIndeterminate = false;
				bus.$emit('getTarget', this.checkedCities.length);//和兄弟组件通信
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
				//				bus.$emit('getTarget', value);
				bus.$emit('changeData', value)//和兄弟组件通信，value是传的参数
				this.$emit('changeData',value)//和父组件通信，注意写法不同
			}
		},
		mounted: function() {
		}
	}
</script>